<template>
    <common-card title="今日交易用户数" :value="numberFormat(orderUser)">
        <div ref="barChartRef" style="width:100%;height:100%"></div>
        <template #footer>
            <span>退货率</span>
            <span class="emphasis">{{ returnRate }}%</span>
        </template>
    </common-card>
</template>

<script lang="ts">
import CommonCard from './CommonCard.vue'
export default {
    name: 'TodayUsers',
    components: {
        CommonCard
    }
}
</script>

<script lang="ts" setup>
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import { ref, onMounted, computed, watch } from 'vue'
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const reportDataStore = useReportDataStore()
const { numberFormat, moneyFormat } = useFormat()
// 今日交易用户数
const orderUser = computed(() => reportDataStore.reportData.orderUser)
const returnRate = computed(() => reportDataStore.reportData.returnRate)
const orderUserTrend = computed(() => reportDataStore.reportData.orderUserTrend)
const orderUserTrendAxis = computed(() => reportDataStore.reportData.orderUserTrendAxis)
const barChartRef = ref()
let barChart: EChartsType
// 准备配置项数据
const getOption = () => {
    return {
        grid: {
            left: 0,
            right: 0
        },
        xAxis: {
            show: false,
            // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            data: orderUserTrendAxis.value
        },
        yAxis: {
            show: false
        },
        series: {
            type: 'bar',
            // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123]
            data: orderUserTrend.value
        },
        // 显示提示
        tooltip: {
            trigger: 'axis',
            confine: true
        }
    }
}

// 页面挂载完毕的时候要执行
onMounted(() => {
    barChart = echarts.init(barChartRef.value)
    // barChart.setOption(getOption())

    // 当页面尺寸变化的时候，也需要变化
    window.addEventListener('resize', () => {
        barChart && barChart.resize()
    })
})

watch(orderUser, () => {
    barChart.setOption(getOption())
})
</script>

<style>
</style>